<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>档案管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/static/dist/css/skins/all-skins.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-treeview.css">
    <link rel="stylesheet" href="/static/css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="/static/plugins/morris/morris.css">
    <link rel="stylesheet" href="/static/webCss/daylb.css?v=shujubuwqd12138">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/static/plugins/ie9/html5shiv.min.js"></script>
    <script src="/static/plugins/ie9/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition skin-blue" style="font-size: medium">

<div class="content row" id="yhgl">

    <div class="modal" id="jydaDiv" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">档案借阅申请</h4>
                </div>
                <div class="modal-body row">
                    <form role="form" id="userForm">
                        <div class="form-group col-xs-6">
                            <label>档案名称</label>
                            <input type="text" class="form-control" name="name" >
                        </div>
                        <div class="form-group col-xs-6">
                            <label>档案号</label>
                            <input type="text" class="form-control" name="dw">
                        </div>
                        <div class="form-group col-xs-6">
                            <label>借阅人</label>
                            <input class="form-control" type="text" name="phone">
                        </div>
                        <div class="form-group col-xs-6">
                            <label>联系电话</label>
                            <select class="form-control" name="roleId">
                                <option style="display: none"></option>
                                <option v-for="(v,k) in allRole" :value="v.id">{{v.name}}</option>
                            </select>
                        </div>
                        <div class="form-group col-xs-6">
                            <label>借阅时限</label>
                            <select class="form-control">
                                <option value="5">5天</option>
                            </select>
                        </div>
                        <div class="form-group col-xs-6">
                            <label>审核人</label>
                            <select class="form-control">
                                <option value="陈旭">陈旭</option>
                            </select>
                        </div>
                        <div class="form-group col-xs-6">
                            <label>审核人联系电话</label>
                            <input class="form-control" type="text" name="password">
                        </div>
                        <div class="form-group col-xs-12">
                            <label>借阅原因</label>
                            <textarea class="form-control"></textarea>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">申请</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!--<div id="addtool" class="btn-group form-inline">-->
        <!--<span class="btn btn-primary inline-block" @click="dajy">档案借阅</span>-->
    <!--</div>-->
    <div class="row" style="overflow: auto;padding-left: 15px;padding-right: 15px">
        <div class="col-xs-12 text-center">
            <div class="btn-group" style="padding-bottom: 12px">
                <button id="kjBtn" @click.prevent="clickkj" class="btn btn-primary" style="width: 152px;height: 38px;font-size:19px;font-family:PingFang SC;background-color: #2C72E8;margin-right: 20px;border-radius:4px;font-weight: 600;">科技档案</button>
                <button id="wsBtn" @click.prevent="clickws" class="btn btn-default" style="width: 152px;height: 38px;font-size:19px;font-family:PingFang SC;background-color: #DADCE0;color: #000000;border-radius:4px;font-weight: 600;">文书档案</button>
            </div>
        </div>
        <div class="col-xs-12 row" style="border: 1px solid #DADCE0;margin-left: 0px;border-radius: 10px;">
            <div class="col-xs-12" v-show="kj" style="height: 400px">
                <table class="table table-bordered table-hover text-center" id="userTable">

                </table>
            </div>
            <div class=" col-xs-12" v-show="ws" style="height: 400px">
                <table class="table table-bordered table-hover text-center" id="daTable">

                </table>
            </div>
            <div  class="col-xs-12 row" v-show="kj">
                <div class="col-xs-6">
                    <div class="box-body" style="height: 300px">
                        <div id="kjChart" style="height: 300px;"></div>
                    </div>
                </div>
                <div class="col-xs-6 row">
                    <div class="col-xs-6">
                        <div class="box-body chart-responsive">
                            <div class="chart" id="kjChart2" style="height: 300px; position: relative;padding-top: 21px;"></div>
                        </div>
                    </div>
                    <div class="col-xs-6 row" style="padding-top: 32px" id="kjCount">

                    </div>
                </div>
            </div>
            <div  class="col-xs-12 row" v-show="ws">
                <div class="col-xs-6">
                    <div class="box-body" style="height: 300px">
                        <div id="wsChart" style="height: 300px;"></div>
                    </div>
                </div>
                <div class="col-xs-6 row" id="addDiv">
                    <div class="col-xs-6">
                        <div class="box-body">
                            <div class="chart" id="wsChart2" style="height: 300px; position: relative;padding-top: 21px;"></div>
                        </div>
                    </div>
                    <div class="col-xs-6 row" style="padding-top: 32px" id="wsCount">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<!-- Slimscroll -->
<script src="/static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/static/plugins/fastclick/fastclick.js"></script>

<!-- AdminLTE App -->
<script src="/static/dist/js/app.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/dist/js/demo.js"></script>
<!--tabs-->
<script src="/static/dist/js/app_iframe.js"></script>
<script src="/static/js/bootstrap-treeview.js"></script>
<script src="/static/js/bootstrapValidator.min.js"></script>
<script src="/static/js/bootstrap-table.min.js"></script>
<script src="/static/js/bootstrap-table-zh-CN.js"></script>
<script src="/static/js/vue.js"></script>
<script src="/static/js/vue-resource.min.js"></script>
<script src="/static/plugins/morris/morris.js"></script>
<script src="/static/plugins/Raphael/raphael.min.js"></script>
<!--<script src="/static/js/highcharts.js"></script>-->
<script src="/static/js/exporting.js"></script>
<!--<script src="/static/js/highcharts-zh_CN.js"></script>-->
<script src="/static/js/grid-light.js"></script>
<script src="/static/js/echarts.min.js"></script>
<script src="/static/js/newJs.js?v=shujubuwqd12138"></script>

<script type="text/javascript">
    newCss("/static/webCss/daylb.css");
    var isOnce = true;
    var arr = new Array();
    var arr2 = new Array();
    var kjda = new Array();
    var wsda = new Array();
    var kjda2 = new Array();
    var wsda2 = new Array();
    var kjNum;
    var wsNum;
    function paramsMatter(value,row,index) {
        var span=document.createElement('span');
        span.setAttribute('title','双击查看详情');
        span.innerHTML = value;
        return span.outerHTML;
    }
    function hander(value,row,index) {
        var aStr = '<a title="双击查看详情" style="color: #000000" href="javascript:void(0)">'+value+'</a>';
        return aStr;
    }
    var vue = new Vue({
        el: '#yhgl',
        data: {
            color:["#68DEED", "#31C5FF", "#4285F4","#AB47BC","#9073FF","#C75450","#48ED58","#EDE240"],
            color2:["color: #68DEED!important", "color: #31C5FF!important", "color: #4285F4!important","color: #AB47BC!important","color: #9073FF!important","color: #C75450!important","color: #48ED58!important","color: #EDE240!important"],
            kjda:[],
            wsda:[],
            percent:[],
            arr:[],
            percent2:[],
            arr2:[],
            yearKj:[],//科技年份数组
            yearWs:[],//文书年份数组
            kj:true,
            ws:false,
            allRole:null
        },
        methods: {
            clickkj:function(){
                $('#kjBtn').css('backgroundColor','#2C72E8');
                $('#kjBtn').css('color','#FFFFFF');
                $('#wsBtn').css('backgroundColor','#DADCE0');
                $('#wsBtn').css('color','#000000');
                this.kj = true;
                this.ws = false;
            },
            clickws:function(){
                $('#wsBtn').css('backgroundColor','#2C72E8');
                $('#wsBtn').css('color','#FFFFFF');
                $('#kjBtn').css('backgroundColor','#DADCE0');
                $('#kjBtn').css('color','#000000');
                this.kj = false;
                this.ws = true;
                wsNum = null;
                wsda = [];
                vue.$data.wsda = [];
                //arr2 = [];
                vue.$data.percent2 = [];
                if(isOnce){
                    this.$http.get('/dalr/api/queryDayilbWs').then(function (result) {
                        var columns = [];
                        var data = result.data;
                        if(data.code == 200){
                            var year = data.data;
                            index = {
                                field: 'dalxName',
                                title: '档案类型'
                            };
                            columns.push(index);
                            var typeYears = year[0].typeYears;
                            for(var j = 0;j<typeYears.length;j++){
                                columns.push({
                                    title:typeYears[j].year,
                                    field:typeYears[j].year,
                                    formatter:paramsMatter,
                                    formatter:hander,
                                });
                            }
                            $('#wsCount').remove();
                            var code = `<div class="col-xs-6 row" style="padding-top: 130px" id="wsCount">

                    </div>`;
                            $('#addDiv').append(code)
                            $("#daTable").bootstrapTable('destroy');
                            $('#daTable').bootstrapTable({
                                url: '/dalr/api/queryDayilbWs',
                                contentType: "application/json; charset=UTF-8",
                                type: "GET",
                                dataType: 'json',
                                queryParamsType: "",
                                singleSelect: true,
                                striped: true,
                                smartDisplay: false,
                                cache: false,
                                toolbar: "#addtool",
                                columns: columns,
                                responseHandler: function (res) {  //后台返回的结果
                                    if (res.code == "200") {
                                        var data = res.data;
                                        var NewData = [];
                                        for(i=0;i<data.length;i++){
                                            var index = {
                                                'dalxName':data[i].dalxName,
                                                'dalx':data[i].dalx,
                                            }
                                            NewData.push(index);
                                            var typeYears = data[i].typeYears;
                                            for(var j = 0;j<typeYears.length;j++){
                                                NewData[i][typeYears[j].year] = typeYears[j].count;
                                            }
                                        }
                                        wsNum = NewData;
                                        for(var i = 0;i < data.length;i++){
                                            var da = data[i];
                                            if(da.dalxName !== '文书档案'){
                                                wsda.push(da.dalxName)
                                            }
                                        }
                                        vue.$data.wsda = wsda;
                                        for(var j = 0;j < wsNum.length;j++){
                                            var nf2 = wsNum[j];
                                            if(nf2.dalxName !== '文书档案'){
                                                var zda2 = 0;
                                                Object.keys(nf2).forEach(key => {
                                                    if(key != 'dalxName' && key != 'dalx'){
                                                        zda2 += nf2[key];
                                                    }
                                                });
                                                arr2.push(zda2);
                                            }
                                        }
                                        vue.$data.arr2 = arr2;
                                        var count = 0;
                                        for(var c = 0;c < arr2.length;c++){
                                            count += arr2[c];
                                        }
                                        for(var n = 0;n < arr2.length;n++){
                                            if(arr2[n] == 0){
                                                vue.$data.percent2[n] = 0.0;
                                            }else {
                                                var percent2 = arr2[n]/count;
                                                vue.$data.percent2[n] = (percent2*1000 - ((percent2*1000)%1))/10;
                                            }
                                        }
                                        for(var n = 0;n< arr2.length;n++){
                                            var wsqq = {label: wsda[n], value: arr2[n]};
                                            wsda2.push(wsqq);
                                        }
                                        //添加代码段
                                        for(var b = 0;b < arr2.length;b++){
                                            if(b%2 ===0){
                                                var codes = `<div class="col-xs-6">
                                <label><i class="fa fa-circle" aria-hidden="true" style="`+vue.$data.color2[b]+`"></i>`+vue.$data.wsda[b]+`</label>
                                <p class="num">`+vue.$data.arr2[b]+`个案卷</p>
                                <p class="pre1">`+vue.$data.percent2[b]+`%</p>
                            </div>`;
                                            }else {
                                                var codes = `<div class="col-xs-6">
                                <label><i class="fa fa-circle" aria-hidden="true" style="`+vue.$data.color2[b]+`"></i>`+vue.$data.wsda[b]+`</label>
                                <p class="num">`+vue.$data.arr2[b]+`个案卷</p>
                                <p class="pre2">`+vue.$data.percent2[b]+`%</p>
                            </div>`;
                                            }

                                            $('#wsCount').append(codes)
                                        }
                                        var donut = new Morris.Donut({
                                            element: 'wsChart2',
                                            resize: true,
                                            colors: vue.$data.color,
                                            data: wsda2,
                                            hideHover: 'auto'
                                        });
                                        var myChart2 = echarts.init(document.getElementById('wsChart'));
                                        // 指定图表的配置项和数据
                                        var option2 = {
                                            title: {
                                                text: '档案总览'
                                            },
                                            tooltip: {},
                                            legend: {
                                                data:['档案数量']
                                            },
                                            xAxis: {
                                                type: 'category',
                                                boundaryGap: false,
                                                data: wsda
                                            },
                                            yAxis: {
                                                type: 'value'
                                            },
                                            series: [
                                                {
                                                    name:'档案数量',
                                                    type:'line',
                                                    lineStyle:{
                                                        color:'#9073FF' //折线颜色
                                                    },
                                                    areaStyle: {normal: {
                                                            color: new echarts.graphic.LinearGradient(
                                                                0, 0, 0, 1,
                                                                [
                                                                    {offset: 0, color: '#CFC1FF'},
                                                                    {offset: 0.5, color: '#CFC1FF'},
                                                                    {offset: 1, color: '#ddd'}
                                                                ]
                                                            )
                                                        }},
                                                    data:arr2
                                                }
                                            ]

                                        };

                                        // 使用刚指定的配置项和数据显示图表。
                                        myChart2.setOption(option2);
                                        var data = {
                                            rows: NewData
                                        };
                                        return data;
                                    }
                                },
                                onDblClickCell:function (field, value, row, $element) {
                                    var wdlx = row.dalx;
                                    var startyear;
                                    var stopyear;
                                    if(field.indexOf('年') !== -1){
                                        startyear = 0;
                                        stopyear = parseInt(field.substring(0,field.indexOf('年')));
                                    }else if(field.indexOf('-') !== -1){
                                        startyear = parseInt(field.substring(0,field.indexOf('-')));
                                        stopyear = parseInt(field.substring(field.indexOf('-')+1));
                                    }else {
                                        startyear = parseInt(field);
                                        stopyear = parseInt(field);
                                    }
                                    if(startyear !== undefined && stopyear !== undefined && wdlx !== undefined){
                                        top.addTabs({
                                            id: "9002",
                                            text: "档案检索",
                                            icon: "fa fa-search",
                                            url: "dajs?wdlx="+wdlx+"&startyear="+startyear+"&stopyear="+stopyear,
                                            targetType: "iframe-tab",
                                            close:true,
                                        });
                                    }
                                }
                            });
                        }
                    })
                }

                isOnce = false;
            },
            dajy: function () {
                $('#jydaDiv').modal('show');
            }
        },
        created: function () {

        },
        mounted: function () {
            var that = this;
            this.$http.get('/dalr/api/queryDayilb').then(function (result) {
                var columns = [];
                var data = result.data;
                if(data.code == 200){
                    var year = data.data;
                    index = {
                        field: 'dalxName',
                        title: '档案类型'
                    };
                    columns.push(index);
                    var typeYears = year[0].typeYears;
                    for(var j = 0;j<typeYears.length;j++){
                        this.yearKj.push(typeYears[j].year);
                        columns.push({
                            title:typeYears[j].year,
                            field:typeYears[j].year,
                            formatter:paramsMatter,
                            formatter:hander,
                        });
                    }
                    $("#userTable").bootstrapTable('destroy');
                    $('#userTable').bootstrapTable({
                        url: '/dalr/api/queryDayilb',
                        contentType: "application/json; charset=UTF-8",
                        type: "GET",
                        dataType: 'json',
                        queryParamsType: "",
                        singleSelect: true,
                        striped: true,
                        smartDisplay: false,
                        cache: false,
                        columns:columns,
                        toolbar: "#addtool",
                        responseHandler: function (res) {  //后台返回的结果
                            if (res.code == "200") {
                                var data = res.data;
                                var NewData = [];
                                for(i=0;i<data.length;i++){
                                    var index = {
                                        'dalxName':data[i].dalxName,
                                        'dalx':data[i].dalx,
                                    }
                                    NewData.push(index);
                                    var typeYears = data[i].typeYears;
                                    for(var j = 0;j<typeYears.length;j++){
                                        NewData[i][typeYears[j].year] = typeYears[j].count;
                                    }
                                }
                                var data2 = NewData;
                                kjNum = data2;
                                for(var i = 0;i < data2.length;i++){
                                    var da = data2[i];
                                    if(da.dalxName !== '科技档案'){
                                        kjda.push(da.dalxName)
                                    }
                                }
                                vue.$data.kjda = kjda;
                                for(var j = 0;j < kjNum.length;j++){
                                    var nf = kjNum[j];
                                    if(nf.dalxName !== '科技档案'){
                                        var zda = 0;
                                        Object.keys(nf).forEach(key => {
                                            if(key != 'dalxName' && key != 'dalx'){
                                                zda += nf[key];
                                            }
                                        });
                                        arr.push(zda);
                                    }
                                }
                                vue.$data.arr = arr;
                                var count = 0;
                                for(var i = 0;i < arr.length;i++){
                                    count += arr[i];
                                }
                                // var count = arr[0] + arr[1] + arr[2] + arr[3];
                                for(var m = 0;m < arr.length;m++){
                                    if(arr[m] == 0){
                                        vue.$data.percent[m] = 0.0;
                                    }else {
                                        var percent = arr[m]/count;
                                        vue.$data.percent[m] = (percent*1000 - ((percent*1000)%1))/10;
                                    }
                                }
                                //添加代码段
                                for(var a = 0;a < arr.length;a++){
                                    if(a%2 ===0){
                                        var codes = `<div class="col-xs-6">
                                <label><i class="fa fa-circle" aria-hidden="true" style="`+vue.$data.color2[a]+`"></i>`+vue.$data.kjda[a]+`</label>
                                <p class="num">`+vue.$data.arr[a]+`个案卷</p>
                                <p class="pre1">`+vue.$data.percent[a]+`%</p>
                            </div>`;
                                    }else {
                                        var codes = `<div class="col-xs-6">
                                <label><i class="fa fa-circle" aria-hidden="true" style="`+vue.$data.color2[a]+`"></i>`+vue.$data.kjda[a]+`</label>
                                <p class="num">`+vue.$data.arr[a]+`个案卷</p>
                                <p class="pre2">`+vue.$data.percent[a]+`%</p>
                            </div>`;
                                    }

                                    $('#kjCount').append(codes)
                                }

                                for(var n = 0;n< arr.length;n++){
                                    var kjqq = {label: kjda[n], value: arr[n]};
                                    kjda2.push(kjqq);
                                }
                                var donut = new Morris.Donut({
                                    element: 'kjChart2',
                                    resize: true,
                                    colors: vue.$data.color,
                                    data: kjda2,
                                    hideHover: 'auto'
                                });
                                var myChart = echarts.init(document.getElementById('kjChart'));
                                // 指定图表的配置项和数据
                                var option = {
                                    title: {
                                        text: '档案总览'
                                    },
                                    tooltip: {},
                                    legend: {
                                        data:['档案数量']
                                    },
                                    xAxis: {
                                        type: 'category',
                                        boundaryGap: false,
                                        data: kjda
                                    },
                                    yAxis: {
                                        type: 'value'
                                    },
                                    series: [
                                        {
                                            name:'档案数量',
                                            type:'line',
                                            lineStyle:{
                                                color:'#9073FF' //折线颜色
                                            },
                                            areaStyle: {normal: {
                                                    color: new echarts.graphic.LinearGradient(
                                                        0, 0, 0, 1,
                                                        [
                                                            {offset: 0, color: '#CFC1FF'},
                                                            {offset: 0.5, color: '#CFC1FF'},
                                                            {offset: 1, color: '#ddd'}
                                                        ]
                                                    )
                                                }},
                                            data:arr
                                        }
                                    ]

                                };

                                // 使用刚指定的配置项和数据显示图表。
                                myChart.setOption(option);
                                var data = {
                                    rows: NewData
                                };
                                return data;
                            }

                        },
                        onDblClickCell:function (field, value, row, $element) {
                            var wdlx = row.dalx;
                            var startyear;
                            var stopyear;
                            if(field.indexOf('年') !== -1){
                                startyear = 0;
                                stopyear = parseInt(field.substring(0,field.indexOf('年')));
                            }else if(field.indexOf('-') !== -1){
                                startyear = parseInt(field.substring(0,field.indexOf('-')));
                                stopyear = parseInt(field.substring(field.indexOf('-')+1));
                            }else {
                                startyear = parseInt(field);
                                stopyear = parseInt(field);
                            }

                            if(startyear !== undefined && stopyear !== undefined && wdlx !== undefined){
                                top.addTabs({
                                    id: "9002",
                                    text: "档案检索",
                                    icon: "fa fa-search",
                                    url: "dajs?wdlx="+wdlx+"&startyear="+startyear+"&stopyear="+stopyear,
                                    targetType: "iframe-tab",
                                    close:true,
                                });
                            }
                        }
                    });
                }
            })


        }
    });
</script>

</body>
</html>
